<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车 - ShoppingEase</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        'dark-2': '#4E5969',
                        'light-1': '#F2F3F5',
                        'light-2': '#E5E6EB',
                        'light-3': '#C9CDD4'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="font-inter bg-gray-50 text-dark">
    <!-- 顶部通知栏 -->
    <div class="bg-primary text-white text-center py-1 px-4 text-sm">
        <p>全场满199元免运费 | 新用户注册立减50元 <a href="register.html" class="underline font-medium">立即注册</a></p>
    </div>

    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16 md:h-20">
                <!-- Logo -->
                <a href="index.html" class="flex items-center space-x-2">
                    <i class="fa fa-shopping-bag text-primary text-2xl"></i>
                    <span class="text-xl font-bold text-primary">ShoppingEase</span>
                </a>

                <!-- 搜索栏 - 中等屏幕以上显示 -->
                <div class="hidden md:flex items-center flex-1 max-w-xl mx-8">
                    <div class="relative w-full">
                        <input type="text" placeholder="搜索商品、品牌或分类..." 
                            class="w-full py-2 pl-10 pr-4 rounded-full border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                        <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-light-3 hover:text-primary transition-colors">
                            <i class="fa fa-search"></i>
                        </button>
                        <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-white py-1 px-4 rounded-full hover:bg-primary/90 transition-colors">
                            搜索
                        </button>
                    </div>
                </div>

                <!-- 用户操作区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索按钮 - 小屏幕显示 -->
                    <button class="md:hidden text-dark-2 hover:text-primary transition-colors">
                        <i class="fa fa-search text-xl"></i>
                    </button>
                    
                    <!-- 购物车 -->
                    <a href="cart.html" class="relative text-dark-2 hover:text-primary transition-colors">
                        <i class="fa fa-shopping-cart text-xl"></i>
                        <span id="cart-count" class="absolute -top-2 -right-2 bg-secondary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
                    </a>
                    
                    <!-- 用户菜单 -->
                    <div id="user-menu-container" class="relative">
                        <!-- 未登录状态 -->
                        <div id="guest-menu" class="flex items-center space-x-2">
                            <a href="login.html" class="text-dark-2 hover:text-primary transition-colors">
                                <i class="fa fa-user-circle-o text-xl"></i>
                            </a>
                            <div class="hidden md:block">
                                <a href="login.html" class="text-dark-2 hover:text-primary transition-colors">登录</a>
                                <span class="text-light-3 mx-1">/</span>
                                <a href="register.html" class="text-dark-2 hover:text-primary transition-colors">注册</a>
                            </div>
                        </div>
                        
                        <!-- 已登录状态 -->
                        <div id="user-menu" class="hidden">
                            <button id="profile-btn" class="flex items-center space-x-2 text-dark-2 hover:text-primary transition-colors">
                                <i class="fa fa-user-circle text-xl"></i>
                                <span id="username-display" class="hidden md:inline">用户名</span>
                                <i class="fa fa-angle-down text-xs"></i>
                            </button>
                            <div id="profile-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50">
                                <a href="profile.html" class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1 hover:text-primary transition-colors">
                                    <i class="fa fa-user-o mr-2"></i>个人中心
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1 hover:text-primary transition-colors">
                                    <i class="fa fa-history mr-2"></i>我的订单
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1 hover:text-primary transition-colors">
                                    <i class="fa fa-heart-o mr-2"></i>我的收藏
                                </a>
                                <div class="border-t border-light-2 my-1"></div>
                                <a href="#" id="logout-btn" class="block px-4 py-2 text-sm text-danger hover:bg-light-1 transition-colors">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 移动端搜索框 - 默认隐藏 -->
            <div class="py-3 hidden">
                <div class="relative w-full">
                    <input type="text" placeholder="搜索商品、品牌或分类..." 
                        class="w-full py-2 pl-10 pr-4 rounded-full border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-light-3 hover:text-primary transition-colors">
                        <i class="fa fa-search"></i>
                    </button>
                    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-white py-1 px-4 rounded-full hover:bg-primary/90 transition-colors">
                        搜索
                    </button>
                </div>
            </div>
        </div>
    </header>

    <main class="py-8">
        <div class="container mx-auto px-4">
            <!-- 面包屑导航 -->
            <nav class="flex mb-4 text-sm">
                <a href="index.html" class="text-dark-2 hover:text-primary">首页</a>
                <span class="mx-2 text-light-3">/</span>
                <span class="text-dark">购物车</span>
            </nav>

            <h1 class="text-2xl font-bold mb-6">我的购物车</h1>

            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
                <!-- 购物车商品列表 -->
                <div class="lg:col-span-3">
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <div class="border-b border-light-2 px-6 py-4">
                            <div class="flex items-center">
                                <input type="checkbox" id="select-all" class="mr-2">
                                <label for="select-all" class="font-medium">全选</label>
                                <div class="ml-auto flex items-center space-x-8">
                                    <span class="text-dark-2">商品信息</span>
                                    <span class="text-dark-2">单价</span>
                                    <span class="text-dark-2">数量</span>
                                    <span class="text-dark-2">小计</span>
                                    <span class="text-dark-2">操作</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 购物车商品项 -->
                        <div class="border-b border-light-2 px-6 py-4">
                            <div class="flex items-center">
                                <input type="checkbox" class="mr-2 cart-item-checkbox">
                                <div class="flex items-center">
                                    <img src="images/cart/1.jpg" alt="购物车商品1" class="w-20 h-20 object-cover rounded">
                                    <div class="ml-3">
                                        <h3 class="font-medium">2025款旗舰智能手机 6.7英寸大屏 128G/256G可选</h3>
                                        <p class="text-sm text-dark-2 mt-1">颜色: 幻影黑 / 内存: 8GB+128GB</p>
                                    </div>
                                </div>
                                <div class="ml-auto flex items-center space-x-8">
                                    <div class="text-right min-w-[80px]">
                                        <p class="font-medium">¥4299</p>
                                    </div>
                                    <div class="flex border rounded">
                                        <button class="w-8 h-8 flex items-center justify-center border-r hover:bg-light-1 transition-colors">
                                            <i class="fa fa-minus text-sm"></i>
                                        </button>
                                        <input type="number" value="1" min="1" class="w-16 h-8 text-center border-none focus:outline-none cart-item-quantity">
                                        <button class="w-8 h-8 flex items-center justify-center border-l hover:bg-light-1 transition-colors">
                                            <i class="fa fa-plus text-sm"></i>
                                        </button>
                                    </div>
                                    <div class="text-right min-w-[80px]">
                                        <p class="font-medium text-danger cart-item-subtotal">¥4299</p>
                                    </div>
                                    <button class="text-dark-2 hover:text-danger transition-colors">
                                        <i class="fa fa-trash-o"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="border-b border-light-2 px-6 py-4">
                            <div class="flex items-center">
                                <input type="checkbox" class="mr-2 cart-item-checkbox">
                                <div class="flex items-center">
                                    <img src="images/cart/2.jpg" alt="购物车商品2" class="w-20 h-20 object-cover rounded">
                                    <div class="ml-3">
                                        <h3 class="font-medium">无线蓝牙耳机 高清通话 主动降噪</h3>
                                        <p class="text-sm text-dark-2 mt-1">颜色: 白色</p>
                                    </div>
                                </div>
                                <div class="ml-auto flex items-center space-x-8">
                                    <div class="text-right min-w-[80px]">
                                        <p class="font-medium">¥299</p>
                                    </div>
                                    <div class="flex border rounded">
                                        <button class="w-8 h-8 flex items-center justify-center border-r hover:bg-light-1 transition-colors">
                                            <i class="fa fa-minus text-sm"></i>
                                        </button>
                                        <input type="number" value="1" min="1" class="w-16 h-8 text-center border-none focus:outline-none cart-item-quantity">
                                        <button class="w-8 h-8 flex items-center justify-center border-l hover:bg-light-1 transition-colors">
                                            <i class="fa fa-plus text-sm"></i>
                                        </button>
                                    </div>
                                    <div class="text-right min-w-[80px]">
                                        <p class="font-medium text-danger cart-item-subtotal">¥299</p>
                                    </div>
                                    <button class="text-dark-2 hover:text-danger transition-colors">
                                        <i class="fa fa-trash-o"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="px-6 py-4">
                            <div class="flex items-center">
                                <input type="checkbox" class="mr-2 cart-item-checkbox">
                                <div class="flex items-center">
                                    <img src="images/cart/3.jpg" alt="购物车商品3" class="w-20 h-20 object-cover rounded">
                                    <div class="ml-3">
                                        <h3 class="font-medium">65W快充充电器 多口输出 兼容多协议</h3>
                                        <p class="text-sm text-dark-2 mt-1">颜色: 白色</p>
                                    </div>
                                </div>
                                <div class="ml-auto flex items-center space-x-8">
                                    <div class="text-right min-w-[80px]">
                                        <p class="font-medium">¥89</p>
                                    </div>
                                    <div class="flex border rounded">
                                        <button class="w-8 h-8 flex items-center justify-center border-r hover:bg-light-1 transition-colors">
                                            <i class="fa fa-minus text-sm"></i>
                                        </button>
                                        <input type="number" value="2" min="1" class="w-16 h-8 text-center border-none focus:outline-none cart-item-quantity">
                                        <button class="w-8 h-8 flex items-center justify-center border-l hover:bg-light-1 transition-colors">
                                            <i class="fa fa-plus text-sm"></i>
                                        </button>
                                    </div>
                                    <div class="text-right min-w-[80px]">
                                        <p class="font-medium text-danger cart-item-subtotal">¥178</p>
                                    </div>
                                    <button class="text-dark-2 hover:text-danger transition-colors">
                                        <i class="fa fa-trash-o"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 购物车底部操作 -->
                        <div class="bg-light-1 px-6 py-4 flex items-center justify-between">
                            <div class="flex items-center">
                                <button class="text-dark-2 hover:text-primary transition-colors mr-6">
                                    <i class="fa fa-trash-o mr-1"></i>删除选中
                                </button>
                                <button class="text-dark-2 hover:text-primary transition-colors">
                                    <i class="fa fa-heart-o mr-1"></i>加入收藏
                                </button>
                            </div>
                            <div class="flex items-center">
                                <span class="text-dark-2 mr-4">已选商品 <span id="selected-count" class="text-primary font-medium">3</span> 件</span>
                                <button class="bg-white text-primary border border-primary px-6 py-2 rounded-lg hover:bg-primary/5 transition-colors mr-4">
                                    继续购物
                                </button>
                                <button id="checkout-btn" class="bg-danger text-white px-8 py-2 rounded-lg hover:bg-danger/90 transition-colors font-medium">
                                    结算 (<span id="total-count">3</span>)
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 推荐商品 -->
                    <div class="bg-white rounded-lg shadow-sm mt-6 p-6">
                        <h2 class="text-lg font-bold mb-4">猜你喜欢</h2>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                            <div class="group">
                                <div class="relative">
                                    <img src="images/cart/4.jpg" alt="推荐商品1" class="w-full h-40 object-cover group-hover:scale-105 transition-transform duration-300 rounded">
                                    <div class="absolute top-2 right-2 bg-danger text-white text-xs py-0.5 px-2 rounded">限时优惠</div>
                                </div>
                                <div class="mt-2">
                                    <h3 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">钢化膜 高清防指纹 9H硬度</h3>
                                    <div class="mt-1">
                                        <span class="text-danger font-bold">¥49</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="group">
                                <div class="relative">
                                    <img src="images/cart/5.jpg" alt="推荐商品2" class="w-full h-40 object-cover group-hover:scale-105 transition-transform duration-300 rounded">
                                </div>
                                <div class="mt-2">
                                    <h3 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">手机保护壳 防摔耐磨 透明全包</h3>
                                    <div class="mt-1">
                                        <span class="text-danger font-bold">¥39</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="group">
                                <div class="relative">
                                    <img src="images/cart/6.jpg" alt="推荐商品3" class="w-full h-40 object-cover group-hover:scale-105 transition-transform duration-300 rounded">
                                    <div class="absolute top-2 right-2 bg-primary text-white text-xs py-0.5 px-2 rounded">新品</div>
                                </div>
                                <div class="mt-2">
                                    <h3 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">手机支架 多功能可折叠 桌面懒人支架</h3>
                                    <div class="mt-1">
                                        <span class="text-danger font-bold">¥59</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 订单摘要 -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-lg shadow-sm sticky top-24">
                        <div class="p-6 border-b border-light-2">
                            <h2 class="text-lg font-bold mb-4">订单摘要</h2>
                            <div class="space-y-3">
                                <div class="flex justify-between">
                                    <span class="text-dark-2">商品总价</span>
                                    <span id="subtotal-amount">¥4,776</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-dark-2">优惠折扣</span>
                                    <span class="text-danger">-¥300</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-dark-2">运费</span>
                                    <span>¥0</span>
                                </div>
                                <div class="border-t border-light-2 pt-3">
                                    <div class="flex justify-between">
                                        <span class="font-bold">实付款</span>
                                        <span class="text-danger text-xl font-bold">¥4,476</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="p-6">
                            <div class="mb-4">
                                <label class="text-dark-2 text-sm mb-2 block">优惠券</label>
                                <div class="flex">
                                    <input type="text" placeholder="输入优惠码" class="flex-1 py-2 px-3 border border-light-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                    <button class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-primary/90 transition-colors">
                                        应用
                                    </button>
                                </div>
                            </div>
                            
                            <button id="checkout-btn-mobile" class="w-full bg-danger text-white py-3 rounded-lg hover:bg-danger/90 transition-colors font-medium">
                                去结算
                            </button>
                            
                            <div class="mt-4 text-center text-sm text-dark-2">
                                <p>支付方式支持: 微信支付、支付宝、银行卡</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white pt-12 pb-6">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">关于我们</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">公司简介</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">招贤纳士</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">用户协议</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">客户服务</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">帮助中心</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">订单查询</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">配送说明</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">退换货政策</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">常见问题</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">支付方式</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">在线支付</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">银行转账</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">货到付款</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">优惠券使用</a></li>
                        <li><a href="#" class="text-light-3 hover:text-white transition-colors">分期付款</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">关注我们</h3>
                    <div class="flex space-x-4 mb-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                    </div>
                    <div>
                        <h4 class="font-medium mb-2">客服热线</h4>
                        <p class="text-2xl font-bold mb-1">400-888-8888</p>
                        <p class="text-light-3 text-sm">周一至周日 9:00-21:00</p>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-dark-2 pt-6 mt-6 text-center text-light-3 text-sm">
                <p>© 2025 ShoppingEase. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 全选/取消全选功能
            const selectAllCheckbox = document.getElementById('select-all');
            const cartItemCheckboxes = document.querySelectorAll('.cart-item-checkbox');
            const selectedCount = document.getElementById('selected-count');
            const totalCount = document.getElementById('total-count');
            
            selectAllCheckbox.addEventListener('change', function() {
                cartItemCheckboxes.forEach(checkbox => {
                    checkbox.checked = selectAllCheckbox.checked;
                });
                updateSelectedCount();
            });
            
            cartItemCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateSelectedCount);
            });
            
            function updateSelectedCount() {
                const checkedCount = document.querySelectorAll('.cart-item-checkbox:checked').length;
                selectedCount.textContent = checkedCount;
                totalCount.textContent = checkedCount;
            }
            
            // 数量增减功能
            const minusBtns = document.querySelectorAll('.border-r');
            const plusBtns = document.querySelectorAll('.border-l');
            const quantityInputs = document.querySelectorAll('.cart-item-quantity');
            const subtotalElements = document.querySelectorAll('.cart-item-subtotal');
            const subtotalAmount = document.getElementById('subtotal-amount');
            
            minusBtns.forEach((btn, index) => {
                btn.addEventListener('click', () => {
                    const input = quantityInputs[index];
                    const currentValue = parseInt(input.value);
                    if (currentValue > 1) {
                        input.value = currentValue - 1;
                        updateSubtotal(index);
                    }
                });
            });
            
            plusBtns.forEach((btn, index) => {
                btn.addEventListener('click', () => {
                    const input = quantityInputs[index];
                    const currentValue = parseInt(input.value);
                    if (currentValue < 100) {
                        input.value = currentValue + 1;
                        updateSubtotal(index);
                    }
                });
            });
            
            quantityInputs.forEach((input, index) => {
                input.addEventListener('change', () => {
                    const value = parseInt(input.value);
                    if (isNaN(value) || value < 1) {
                        input.value = 1;
                    } else if (value > 100) {
                        input.value = 100;
                    }
                    updateSubtotal(index);
                });
            });
            
            function updateSubtotal(index) {
                const price = [4299, 299, 89]; // 对应每个商品的单价
                const quantity = parseInt(quantityInputs[index].value);
                const subtotal = price[index] * quantity;
                subtotalElements[index].textContent = `¥${subtotal}`;
                
                // 更新总价
                updateTotalPrice();
            }
            
            function updateTotalPrice() {
                let total = 0;
                subtotalElements.forEach(element => {
                    const subtotal = parseInt(element.textContent.replace('¥', ''));
                    total += subtotal;
                });
                
                // 格式化总价
                const formattedTotal = total.toLocaleString('zh-CN');
                subtotalAmount.textContent = `¥${formattedTotal}`;
                
                // 更新实付款
                const discount = 300; // 固定优惠300元
                const finalAmount = total - discount;
                document.querySelector('.text-danger.text-xl.font-bold').textContent = `¥${finalAmount.toLocaleString('zh-CN')}`;
            }
            
            // 结算按钮跳转
            const checkoutBtn = document.getElementById('checkout-btn');
            const checkoutBtnMobile = document.getElementById('checkout-btn-mobile');
            
            checkoutBtn.addEventListener('click', () => {
                const checkedCount = document.querySelectorAll('.cart-item-checkbox:checked').length;
                if (checkedCount > 0) {
                    window.location.href = 'checkout.html';
                } else {
                    alert('请选择要结算的商品！');
                }
            });
            
            checkoutBtnMobile.addEventListener('click', () => {
                const checkedCount = document.querySelectorAll('.cart-item-checkbox:checked').length;
                if (checkedCount > 0) {
                    window.location.href = 'checkout.html';
                } else {
                    alert('请选择要结算的商品！');
                }
            });
        });
    </script>
</body>
</html>